<template>
  <el-container class="h-100" v-loading="loading">
    <el-header class="shadow-sm d-flex justify-content-center bg-white" style="height: 80px;">
      <div class="w-100 d-flex justify-content-between align-items-center bg-white" style="line-height: 80px;">
        <h5 class="d-inline">外业人员工作质量</h5>
        <div>
          <el-select v-model="type" placeholder="请选择" @change="getDatas" size="small">
            <el-option label="初次举证" value="1"></el-option>
            <el-option label="补充举证" value="2"></el-option>
          </el-select>
          <el-select v-model="cityId" placeholder="请选择市" style="width: 200px;" 
            clearable size="small" @change="filterDataCity()">
            <el-option v-for="(val, key) in city" :filterable="true" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
          <el-select v-model="areaId" placeholder="请选择区县" ref="area" clearable size="small" @change="filterData()">
            <el-option v-for="(val, key) in area" :filterable="true" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
        </div>
      </div>
    </el-header>
     <el-main class="p-2 m-2 bg-white">
      <el-table :data="datas">
        <el-table-column fixed label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地市" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.city_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="区县" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.area_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.account }}</span>
          </template>
        </el-table-column>
        <el-table-column label="举证数量" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.jzsl }}</span>
          </template>
        </el-table-column>
        <el-table-column label="通过率" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tgl }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
import axios from "axios";
import pca from '@/libs/pca-code'
import _ from 'lodash'

export default {
  title: "外业人员工作质量",
  data() {
    return {
      loading: false,
      allDatas: [],
      datas: [],
      type: '1',
      cityId: '',
      areaId: '',
    }
  },
  mounted() {
    this.getDatas()
  },
  methods: {
    getDatas() {
      this.loading = true
      let url = 'json/gzzl/cc.json'
      if (this.type === '2') {
        url = 'json/gzzl/bc.json'
      }
      axios.get(url).then(res => {
        this.allDatas = res.data || []
        this.datas = [...this.allDatas]
        // this.datas = _.sortBy([...this.allDatas], function(o) { return o.user; });
      })
      .catch(error => {
        this.$catchError(error);
      })
      .finally(() => {
        this.loading = false;
      });
    },
    filterDataCity() {
      if (this.cityId) {
        this.datas = _.filter(this.allDatas, { city_id: Number(this.cityId) });
      } else {
        this.datas = [...this.allDatas]
      }
    },
    filterData() {
      if (this.areaId) {
        this.datas = _.filter(this.allDatas, { area_id: Number(this.areaId) });
      } else {
        this.datas = [...this.allDatas]
      }
    }
  },
  computed: {
    city() {
      let type = this.$store.getters.userType
      if (type === 1) {
        return pca[610000]
      } else {
        return []
      }
      
    },
    area() {
      let type = this.$store.getters.userType
      if (type === 1) {
        this.areaId = ''
        return this.cityId ? pca[this.cityId] : {}
      } else {
        return pca[this.$store.getters.cityId]
      }
    },
  }
}
</script>
<style lang="scss">
</style>